/*
 * Copyright (C) 2020 Graylog, Inc.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the Server Side Public License, version 1,
 * as published by MongoDB, Inc.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * Server Side Public License for more details.
 *
 * You should have received a copy of the Server Side Public License
 * along with this program. If not, see
 * <http://www.mongodb.com/licensing/server-side-public-license>.
 */
import React, { useContext, useState } from 'react';

import { PageHeader, Spinner } from 'components/common';
import { Row, Col, Button, BootstrapModalConfirm, Alert } from 'components/bootstrap';
import DocsHelper from 'util/DocsHelper';
import useSendTelemetry from 'logic/telemetry/useSendTelemetry';
import useHistory from 'routing/useHistory';
import Routes from 'routing/Routes';
import { TELEMETRY_EVENT_TYPE } from 'logic/telemetry/Constants';
import useGetPermissionsByScope from 'hooks/useScopePermissions';

import RuleBuilder from './rule-builder/RuleBuilder';
import RuleForm from './RuleForm';
import RuleHelper from './rule-helper/RuleHelper';
import { PipelineRulesContext } from './RuleContext';

import PipelinesPageNavigation from '../pipelines/PipelinesPageNavigation';

type Props = {
  create?: boolean;
  title?: string;
  isRuleBuilder?: boolean;
};

const Rule = ({ create = false, title = '', isRuleBuilder = false }: Props) => {
  const [showConfirmSourceCodeEditor, setShowConfirmSourceCodeEditor] = useState<boolean>(false);
  const { rule } = useContext(PipelineRulesContext);
  const { loadingScopePermissions, scopePermissions } = useGetPermissionsByScope(rule);
  const isManaged = scopePermissions && !scopePermissions?.is_mutable;
  const history = useHistory();
  const sendTelemetry = useSendTelemetry();

  if (loadingScopePermissions) {
    return <Spinner text="Loading Rule" />;
  }

  let pageTitle;

  if (create) {
    pageTitle = 'Create pipeline rule';
  } else {
    pageTitle = (
      <span>
        Pipeline rule <em>{title}</em>
      </span>
    );
  }

  return (
    <div>
      <PipelinesPageNavigation />
      <PageHeader
        title={pageTitle}
        actions={
          isRuleBuilder && create ? (
            <Button
              bsStyle="primary"
              bsSize="small"
              onClick={() => {
                sendTelemetry(TELEMETRY_EVENT_TYPE.PIPELINE_RULE_BUILDER.USE_SOURCE_CODE_EDITOR_CLICKED, {
                  app_section: 'pipeline-rules',
                  app_action_value: 'source-code-editor-button',
                });

                setShowConfirmSourceCodeEditor(true);
              }}>
              Use Source Code Editor
            </Button>
          ) : undefined
        }
        documentationLink={{
          title: 'Pipeline rules documentation',
          path: DocsHelper.PAGES.PIPELINE_RULES,
        }}>
        <span>
          Rules are a way of applying changes to messages. A rule consists of a condition and a list of actions. The
          condition is evaluated against a message, and the actions are executed if the condition is satisfied.
        </span>
      </PageHeader>
      {isRuleBuilder ? (
        <RuleBuilder />
      ) : (
        <Row className="content">
          <Col md={6}>
            {isManaged && <Alert bsStyle="warning">This rule is managed by Application. You cannot edit it.</Alert>}
            <RuleForm create={create} isManaged={isManaged} />
          </Col>
          <Col md={6}>
            <RuleHelper />
          </Col>
        </Row>
      )}

      {showConfirmSourceCodeEditor && (
        <BootstrapModalConfirm
          showModal
          title="Switch to Source Code Editor"
          onConfirm={() => {
            sendTelemetry(TELEMETRY_EVENT_TYPE.PIPELINE_RULE_BUILDER.SWITCH_TO_SOURCE_CODE_EDITOR_CONFIRM_CLICKED, {
              app_section: 'pipeline-rules',
              app_action_value: 'confirm-button',
            });

            history.push(Routes.SYSTEM.PIPELINES.RULE('new'));
            setShowConfirmSourceCodeEditor(false);
          }}
          onCancel={() => {
            sendTelemetry(TELEMETRY_EVENT_TYPE.PIPELINE_RULE_BUILDER.SWITCH_TO_SOURCE_CODE_EDITOR_CANCEL_CLICKED, {
              app_section: 'pipeline-rules',
              app_action_value: 'cancel-button',
            });

            setShowConfirmSourceCodeEditor(false);
          }}>
          <div>You are about to leave this page and go to the Source Code Editor.</div>
          <div>Make sure you have no unsaved changes.</div>
        </BootstrapModalConfirm>
      )}
    </div>
  );
};

export default Rule;
